<template>
    <div class="customer">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getCustomerList" @clear="clear">
            <choice-company slot="buyCompany" :choiceObj="choiceObj" :shopType="0"></choice-company>
            <choice-company slot="saleCompany" :choiceObj="saleChoiceObj" :shopType="1"></choice-company>
        </search-form>
        <elTable :formData="formData" @getList="getCustomerList">
                <el-table-column prop="company.name" label="买家公司名称" align="center"></el-table-column>
                <el-table-column prop="company.organizingCode" label="买家公司组织机构代码" align="center"></el-table-column>
                <el-table-column prop="company.openAccountStatusMessage" label="买家公司开户状态" align="center"></el-table-column>
                <el-table-column prop="company.bindBankStatusMessage" label="买家公司绑卡状态" align="center"></el-table-column>
                <el-table-column prop="company.sourceMessage" label="买家公司注册来源" align="center"></el-table-column>
                <el-table-column prop="salesCompany.statusMessage" label="卖家公司审核状态" align="center"></el-table-column>
                <el-table-column prop="salesCompany.organizingCode" label="卖家公司组织机构代码" align="center"></el-table-column>
                <el-table-column prop="salesCompany.openAccountStatusMessage" label="卖家公司开户状态" align="center"></el-table-column>
                <el-table-column prop="salesCompany.bindBankStatusMessage" label="卖家公司绑卡状态" align="center"></el-table-column>
                <el-table-column prop="salesCompany.sourceMessage" label="卖家公司注册来源" align="center"></el-table-column>
                <el-table-column prop="statusMessage" label="客户状态" align="center"></el-table-column>
                <el-table-column prop="createTime" label="申请时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createTime && $normalTime(scope.row.createTime) || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <!-- <dialogs
        title="审核"
        :visible="showAuditDialog"
        width="500px"
        @confirm="confirmChangeStatus"
        class="sh-dialog"
        >
          <el-form v-model="statusForm" label-width="80px">
              <el-form-item label="状态">
                  <el-select  v-model="statusForm.status" placeholder="请选择状态">
                      <el-option value="-1" label="拒绝" ></el-option>
                      <el-option value="2" label="通过" ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="审核原因">
                  <textarea v-model.trim="statusForm.auditLog.memo" placeholder="请输入审核原因"></textarea>
              </el-form-item>
          </el-form>
        </dialogs> -->
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import { mapGetters } from 'vuex'
import choiceCompany from '@/components/Choice/company'
export default {
    name: 'role',
    components: {
        elTable,
        choiceCompany
    },
    data () {
        return {
            choiceObj: {
                label: '',
                value: ''
            },
            saleChoiceObj: {
                label: '',
                value: ''
            },
            statusForm: {
                status: '',
                auditLog: {
                    memo: ''
                }
            },
            formData: {
                data: [],
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            showAuditDialog: {
                show: false
            },
            searchObj: {
                stauts: '',
                searchType: 'salesCompany',
                isRelation: ''
            },
            searchArray: [
                {
                    type: 'slot',
                    slotName: 'buyCompany',
                    label: '请选择买家公司',
                    key: 'companyId'
                },
                {
                    type: 'slot',
                    slotName: 'saleCompany',
                    label: '请选择卖家公司',
                    key: 'salesCompanyId'
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '审核状态',
                    key: 'stauts',
                    list: [
                    ]
                },
                {
                    type: 'select',
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '查询类型',
                    key: 'searchType',
                    list: [
                        {label: '店铺维度', value: 'salesCompany'},
                        {label: '区域', value: 'area'},
                    ]
                },
                {
                    type: 'select',
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '查询类型',
                    key: 'isRelation',
                    list: [
                        {label: '否', value: false},
                        {label: '是', value: true},
                    ]
                }
            ],
            formData: {
                currentPage: 1,
                pageSize: 10,
                data: [],
                total: 0
            },
            currentItem: {}
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        // this.init()
    },
    methods: {
        init () {
            this.$set(this.searchArray[2], 'list', this.enumAll.EnumCompanyStatus || [])
            this.getCustomerList()
        },
        examine (item) {
            this.currentItem = item
            this.showAuditDialog.show = true
        },
        goDetail (item) {
            this.$router.push({
                path: '/userManage/customer/detail/'+item.id
            })
        },
        clear () {
            this.choiceObj = {
                label: '',
                value: ''
            }
            this.saleChoiceObj = {
                label: '',
                value: ''
            }
        },
        getCustomerList (status = true) {
            if (!status) this.formData.currentPage = 1
            this.$loading(true)
            const {formData: {currentPage, pageSize}, searchObj, choiceObj: {value}, saleChoiceObj} = this
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for (let k in searchObj) {
                if (searchObj[k] || (!searchObj[k] && searchObj[k] !== '')) {
                    param[k] = searchObj[k]
                }
            }
            if (value) param.companyId = value
            if (saleChoiceObj.value) param.salesCompanyId = saleChoiceObj.value
            this.$api.userManage.getCustomerList(param).then(r => {
                let list = r.data && r.data.list  || []
                this.$set(this.formData, 'data', list)
                this.$set(this.formData, 'total', r.data.total || 0)
            }).finally(() => {
                this.$loading(false)
            })
        },
        confirmChangeStatus () {
            const {statusForm: {status, auditLog: {memo}}, currentItem: {id}} = this
            if (!status) {
                this.$message.error('请选择审核状态')
                return
            }
            if (!memo) {
                this.$message.error('请输入审核原因')
                return
            }
            let param = {
                status,
                auditLog: {
                    memo
                },
                id
            }
            this.$loading(true)
            this.$api.userManage.putCustomeChangeStatus(param).then(r => {
                this.$message.success(r.message)
                this.showAuditDialog.show = false
                setTimeout(() => {
                    this.getCustomerList()
                }, 1000)
            }).finally(() => {
                this.$loading(false)
            })
        },
    },
    watch: {
        'showAuditDialog.show' (val) {
            if (!val) {
                this.statusForm = {
                    status: '',
                    auditLog: {
                        memo: ''
                    }
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.customer {
    .search-form {
        margin-bottom: 15px;
    }
    ::v-deep.special {
        height: 100px;
        .el-form-item__content {
            max-height: 100px;
            overflow-y: auto;
            padding-top: 5px;
        }
    }
    ::v-deep.sh-dialog {
        .el-form {
            .el-select {
                width: 100%;
            }
            textarea {
                width: 100%;
                height: 100px;
                border: 1px solid #ddd;
                box-sizing: border-box;
                padding: 10px;
                &:focus {
                    outline: none;
                }
            }
        }
    }
}
</style>